<template>
    <div>
        <!--轮播图区域-->
        <swiper :lunbotuList="this.lunbotuList" :isFull="true"></swiper>

        <!--9宫格到6宫格的改造工程-->
        <ul class="mui-table-view mui-grid-view mui-grid-9">
            <!--图片分享-->
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link :to="'/home/photolist/' + this.currentStoreId">
                    <img src="../../images/menu2.png" alt="">
                    <div class="mui-media-body">图片分享</div>
                </router-link>
            </li>


            <!--商品购买-->
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3">
                <router-link :to="'/home/goodslist/' + this.currentStoreId">
                    <img src="../../images/menu3.png" alt="">
                    <div class="mui-media-body">商品购买</div>
                </router-link>
            </li>
            <!--新闻资讯-->
            <li class="mui-table-view-cell mui-media mui-col-xs-3 mui-col-sm-3" v-for="item in navigationList" :key="item.img">
                <router-link to="/home/newslist">
                    <img :src="item.image" alt="">
                  <div class="mui-media-body">{{item.title}}</div>
                </router-link>
            </li>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">

    import { Toast } from 'mint-ui'
    //轮播图子组件
    import swiper from '../subcomponents/swiper.vue'

    export default {
        name: 'HomeContainer',
        data() {
            return {
                lunbotuList: [],//保存轮播图的数组
                navigationList:[],//九宫格导航
                currentStoreId:'14',
            }
        },
        created() {
            this.getLunbotu();
        },
        methods: {
            getLunbotu() {
                console.log('首页')
                //获取轮播图数据的方法
                this.$http.get("mobile/index.php?act=index&op=index&store_id="+this.currentStoreId).then(result=>{

                    var lunboArray = result.body.datas.slider
                    var navigationAray = result.body.datas.navigation
                    console.log(result)

                    //成功了
                    if (result.body.code == 200) {
                        //轮播图
                        this.lunbotuList = lunboArray
                        //导航
                        this.navigationList = navigationAray
                        Toast('加载数据ok...');
                    }else {
                        //失败了
                        Toast('加载轮数据失败...')
                    }
                });
            }
        },
        components: {
            swiper
        },
    }
</script>


<style lang="scss" scoped rel="stylesheet/scss">



    .mui-grid-view.mui-grid-9 {
        background-color: #fff;
        border:none;

        img {
            width:40px;
            height:40px;
        }

        .mui-media-body {
            font-size: 10px;
        }
    }

    .mui-grid-view.mui-grid-9 .mui-table-view-cell {
        border:0;
    }

</style>